<template>
  <div class="homeMessage">
    <van-nav-bar title="消息中心" :left-arrow="false">
      <template #left>
        <van-icon
          name="arrow-left"
          size="24"
          color="black"
          @click="onClickLeft"
        />
      </template>
      <template #right>
        <span>全部已读</span>
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="state.refreshing">
      <van-list>
        <ul>
          <li v-for="item in state.list" :key="item.path">
            <van-icon :name="item.path" size="40" color="#009CFF" />
            <span> {{ item.title }}</span>
          </li>
        </ul>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script>
import { useRouter } from "vue-router";
import { reactive } from "vue";
export default {
  setup() {
    const router = useRouter();
    let state = reactive({
      list: [
        {
          path: "shop",
          title: "系统消息",
        },
        {
          path: "balance-list",
          title: "活动消息",
        },
      ],
      refreshing: false,
    });

    const onClickLeft = () => router.go(-1);
    // const onClickRight = () => Toast('按钮');
    return {
      onClickLeft,
      // onClickRight,
      router,
      state,
      // onRefresh
    };
  },
};
</script>
<style lang="less" scoped>
ul {
  width: 100%;
  li {
    width: 100%;
    border-bottom: 1px solid #999999;
    padding: 10px 20px;
    height: 70px;
    line-height: 70px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    span {
      margin-left: 10px;
      font-size: 14px;
    }
  }
}
</style>
